<template>
    <div class="min-h-[790px] relative">
        <div class="flex" v-if="tableData.data.length != 0">
            <div class="flex flex-col w-[402px] gap-[16px]">
                <div :class="`flex rounded-[5px] ${checkedId == item.id ? 'listbgc1' : 'listbgc'} listbgc`"
                    v-if="tableData.data.length != 0" v-for="(item, index) in tableData.data" :key="index"
                    @click="checkedItem(item)">
                    <div class="h-[136px] w-[374px]  py-[16px] pl-[16px]">
                        <div class="textalarm">
                            <div class="flex">
                                <div class="!leading-0 !text-[16px] relative ">
                                    {{ isNullOrEmpty(item?.deviceName) }}
                                    <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF] "
                                        style="border-radius: 2px;"></div>
                                </div>
                            </div>
                            <div class="flex alltext mt-[16px]">
                                <div class="mr-[20px] text-[#8f98a0]">
                                    设备编号
                                </div>
                                <div class="alltext">
                                    {{ isNullOrEmpty(item?.deviceSN) }}
                                </div>
                            </div>
                            <div class="flex alltext mt-[12px]">
                                <div class="mr-[20px] text-[#8f98a0]">
                                    告警信息
                                </div>
                                <div class="alltext">
                                    {{ isNullOrEmpty(item?.alarmTitle) }}
                                </div>
                            </div>
                            <div class="flex alltext mt-[12px]">
                                <div class="mr-[20px] text-[#8f98a0]">
                                    位置信息
                                </div>
                                <div class="alltext">
                                    {{ isNullOrEmpty(item?.place) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-[64px] h-[32px]  mt-[16px]">
                        <div class="leading-[32px] pl-[8px] text-[16px] font-bold"
                            :class="item.alarmType == 1 ? 'listbg1' : item.alarmType == 2 ? 'listbg2' : item.alarmType == 3 ? 'listbg3' : 'listbg'">
                            {{ isNullOrEmpty(ALARMTYPES[item.alarmType]?.label ? ALARMTYPES[item.alarmType]?.label :
                                '正常') }}
                        </div>
                    </div>
                </div>

                <nullpng v-else />
                <div class=" w-[100%]  flex-c">
                    <div class="absolute bottom-[16px]">
                        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit"
                            background :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList"
                            size="small" style="color: #fff;" @current-change="getTableList" />
                    </div>
                </div>
            </div>


            <div class="w-[100%] ml-[30px]">
                <div>
                    <el-text class="!leading-0 !text-[22px] !font-bold" style="border-bottom: 3px solid #4583FF ;">
                        {{ isNullOrEmpty(alarmInfo?.productName) }}
                    </el-text>
                </div>
                <div class="flex mt-[20px]">
                    <div class="flex">
                        <div class="flex mr-[54px] items-center">
                            <div class="mr-[10px]">确认状态</div>
                            <el-tag :type="CONFIRMSTATUSTEXT[alarmInfo.confirm]?.type" :key="alarmInfo.confirm">
                                {{ CONFIRMSTATUSTEXT[alarmInfo.confirm]?.label }}
                            </el-tag>
                        </div>
                        <div class="flex items-center">
                            <div class="mr-[10px]">处理状态</div>
                            <el-tag :type="HANDLESTATUSTEXT[alarmInfo?.dealStatus]?.type" :key="alarmInfo?.dealStatus">
                                {{ isNullOrEmpty(HANDLESTATUSTEXT[alarmInfo?.dealStatus]?.label) }}
                            </el-tag>
                        </div>
                    </div>
                    <div class="flex-1 flex justify-end ">
                        <div class="w-[80px] h-[32px] cursor-pointer leading-[32px] px-[10px] rounded-[4px] but"
                            @click="alarmHandling">
                            告警处理
                        </div>
                    </div>
                </div>
                <div style="border: 1px solid #393D51;" class="my-[20px]"></div>
                <el-descriptions direction="vertical" :column="2">
                    <template #title>
                        <div class="flex items-center">
                            <div class="w-[3px] h-[18px] bg-[#4583FF] rounded-[2px] mr-[10px]">
                            </div>
                            <div class="text-[18px] text-[#fff] font-medium">告警设备</div>
                        </div>

                    </template>
                    <el-descriptions-item label="所属单位">
                        <div class="w-[400px] myclass">
                            {{ isNullOrEmpty(alarmInfo?.unityName) }}
                        </div>

                    </el-descriptions-item>
                    <el-descriptions-item width="50%" label="所属项目">{{ isNullOrEmpty(alarmInfo?.projectName)
                        }}</el-descriptions-item>
                    <el-descriptions-item label="产品类型">{{ isNullOrEmpty(alarmInfo?.productName)
                        }}</el-descriptions-item>
                    <el-descriptions-item label="设备编号">
                        {{ isNullOrEmpty(alarmInfo?.deviceSN) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="位置类型">
                        {{ isNullOrEmpty(DEVICEPOSITIONTEXT[alarmInfo?.position]?.label) }}

                    </el-descriptions-item>
                    <el-descriptions-item label="所属建筑">
                        {{ isNullOrEmpty(alarmInfo?.buildingName) }}{{ isNullOrEmpty(alarmInfo?.drawingName) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="位置描述">
                        {{ isNullOrEmpty(alarmInfo?.placeDesc) }}
                    </el-descriptions-item>
                </el-descriptions>

                <el-descriptions direction="vertical" :column="4">
                    <template #title>
                        <div class="flex items-center">
                            <div class="w-[3px] h-[18px] bg-[#4583FF] rounded-[2px] mr-[10px]">
                            </div>
                            <div class="text-[18px] text-[#fff] font-medium">告警信息</div>
                        </div>
                    </template>
                    <el-descriptions-item width="25%" label="告警事件">
                        <div class=" myclass">
                            {{ isNullOrEmpty(alarmInfo?.alarmTitle) }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item width="25%" label="事件等级">
                        <el-tag :type="EVENTLEVELS[alarmInfo?.alarmLevel]?.type" size="Large">
                            {{ isNullOrEmpty(EVENTLEVELS[alarmInfo?.alarmLevel]?.label) }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="告警类型">
                        <el-tag size="Large" :type="ALARMTYPES[alarmInfo?.alarmType]?.type" :key="alarmInfo?.alarmType">
                            {{ ALARMTYPES[alarmInfo?.alarmType]?.label }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="告警时间">
                        {{ isNullOrEmpty(alarmInfo?.createdAt) }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions direction="vertical" :column="2">
                    <el-descriptions-item width="50%" label="抓拍照片">
                        <img class="w-full pr-[20px] aspect-video object-contain" v-img-error="alarmInfo?.img[0]"
                            v-if="alarmInfo?.img" :src="alarmInfo?.img[0]"></img>
                        <div class="w-full pr-[20px] aspect-video" v-else></div>
                    </el-descriptions-item>
                    <el-descriptions-item width="50%" label="实时监控">
                        <!-- <videoplay class="!w-[446px] !h-[250px]" :id="`play${alarmInfo?.id}`"
                            :video-url="alarmInfo?.moniterUrl" :isautoplay="false"></videoplay> -->
                        <div class="w-full relative" v-show="alarmInfo?.moniterUrl">
                            <div id="mse" class="!w-full  !h-full aspect-video"></div>
                        </div>
                        <div v-show="!alarmInfo?.moniterUrl" class="w-full aspect-video relative flex-c bg-[#091b2c]">
                            暂无视频...
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="w-full h-full" v-else>
            <nullpng />
        </div>
    </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import Player,{ Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { getAlarmDetail, getAlarmHandle, getAlarmRecord, getDeviceVideo } from "@/api/screen";
import { PAGE_LAYOUTLEFTS, } from "@/constant";
import alarmHand from '@/views/large-data-screen/component/alarmHand.vue'
import { ALARMTYPES, CONFIRMSTATUSTEXT, HANDLESTATUSTEXT, DEVICEPOSITIONTEXT, EVENTLEVELS } from "@/constant/alarm-mangenment";
import { addDialog } from "@/components/ReDialog";
import { message } from "@/utils/message";
import { emitter } from '@/utils/mitt'

const props = defineProps({
    closePopup: {
        type: Function,
        default: () => { }
    }
})

const player = ref(null);
const checkedId = ref(null)
const formRef = ref()
const tableData = reactive({
    data: [],
    total: 0
});
const searchFrom = ref({
    page: 1,
    limit: 5
});
const alarmInfo = ref({} as any)
const defour = () => {
    return {
        id: alarmInfo.value.id,
        confirm: null,
        dealStatus: null,
        dealView: null,
        sellMethod: null,
        processId: null,
        handleUid: null,
        noticeType: []
    };
};
onMounted(() => {
    getTableList()
    emitter.on('alarmEvents', re)
})
onBeforeUnmount(() => {
    emitter.off('alarmEvents', re)
})
const re = () => {
    getTableList()
}
const getTableList = () => {
    getAlarmRecord(searchFrom.value).then(res => {
        tableData.data = res.result.data
        tableData.total = res.result.total
        if (!checkedId.value && res.result.data.length > 0) {
            checkedItem(res.result.data[0])
        }
        if (res.result.total == 0) {
            message(`暂无告警事件`, { type: "warning" });
            setTimeout(() => {
                props.closePopup()
            }, 1000)
        }
    })
}
const checkedItem = (item) => {
    checkedId.value = item.id
    getAlarmDetail({ id: checkedId.value }).then(res => {
        alarmInfo.value = res.result
        getDeviceVideo({ deviceId: alarmInfo.value.deviceId }).then(res => {
            alarmInfo.value.moniterUrl = res.result.url
            player.value = new Player({
                id: 'mse',
                url: alarmInfo.value.moniterUrl,
                plugins: [HlsPlugin],
            })

            player.value.on(Events.PLAY, () => {
                if (res.result.playDuration) {
                    setTimeout(() => {
                        player.value.pause()
                    }, res.result.playDuration * 60 * 1000);
                }
            })
        })

    })
}
const alarmHandling = () => {
    if (!alarmInfo.value.id) {
        message(`请先选择告警事件`, {
            type: "warning"
        });
        return
    }
    addDialog({
        title: `告警处理`,
        width: "400px",
        draggable: true,
        fullscreen: false,
        fullscreenIcon: true,
        props: {
            id: alarmInfo.value.id,
            projectId: alarmInfo.value.projectId,
        },
        closeOnClickModal: false,
        contentRenderer: () => h(alarmHand, { ref: formRef }),
        openAutoFocus({ options }) {
            options.props = {
                isLoading: false,
                id: alarmInfo.value.id,
                projectId: alarmInfo.value.projectId,
                formInlines: defour()
            };
        },
        beforeSure: (done, { options }) => {
            const FormRefsa = formRef.value.getRef();
            const formData = options.props.formInlines;
            function chores() {
                message(`操作成功`, {
                    type: "success"
                });
                done();
                checkedItem(alarmInfo.value)
            }
            console.log("formData", formData);

            FormRefsa.validate(valid => {
                if (valid) {
                    getAlarmHandle(formData).then(res => {
                        if (res.code == 200) {
                            chores()
                        }
                    }).catch(err => {
                        if (err !== "请求中") {
                            options.props.isLoading = false;
                        }
                    });
                }
            });
        }
    });
}
</script>
<style lang="scss" scoped>
.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 12px !important;
}

.but {
    background: rgba(17, 33, 65, 0.8);
    border: 1px solid #4583FF;
}

.listbg {
    background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(37, 176, 19, 1);
    border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
    background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(240, 50, 50, 1);
    border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbg2 {
    background: linear-gradient(90deg, rgba($color: #D8722F, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(224, 117, 46, 1);
    border-left: 2px solid rgba(224, 117, 46, 1);
}

.listbg3 {
    color: rgba(173, 173, 173, 1);
    background: linear-gradient(90deg, rgba($color: #ADADAD, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    border-left: 2px solid rgba(173, 173, 173, 1);
}

.listbgc {
    background-color: rgba($color: #292E48, $alpha: 0.4);
    border: 1px solid rgba(255, 255, 255, 0);
}

.listbgc1 {
    background: linear-gradient(180deg, #1d2235 0%, #234383 100%);
    border: 1px solid;
    border-image: linear-gradient(to top, #4583ff, #24293F) 1;
    clip-path: inset(0 round 4px);
}

.my-class {
    // width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    word-break: break-all;
}

.textAll {}
</style>
